<template>
    <div style="background-color: #f5f4f1; min-height: 150vh">
        <!-- 头部区域开始 -->
        <UserNav/>
        <!-- 头部区域结束 -->

        <!--  下方区域开始 -->
        <div class="bottomArea">
            <!--  菜单区域开始 -->
            <div style="width: 240px; height: 100vh; position: fixed">
                <div style="flex: 1; display: flex; align-items: center; padding-left: 20px; height: 40px; background-color: #fffefb">
                    <el-icon><ArrowLeft/></el-icon><span @click="router.push('/userhome')" style="margin-right: 5px; cursor: pointer;">backHome</span>
                    /
                    <span style="margin-left: 5px; cursor: pointer">{{ router.currentRoute.value.meta.name }}</span>
                </div>
                <el-menu router :default-active="router.currentRoute.value.path">
                    <el-menu-item index="/messagecenter/systemmessage">
                        <img src="../../../assets/icon_svg/系统公告.svg" alt="icon" style="width: 21px; height: 21px">
                        <span style="padding-left: 20px">系统公告</span>
                    </el-menu-item>
                    <el-menu-item index="/messagecenter/privatemessage">
                        <img src="../../../assets/icon_svg/我的私信.svg" alt="icon" style="width: 22px; height: 22px">
                        <span style="padding-left: 20px">我的私信</span>
                    </el-menu-item>
                    <el-menu-item index="/messagecenter/generalmessage">
                        <img src="../../../assets/icon_svg/互动通知.svg" alt="icon" style="width: 24px; height: 24px">
                        <span style="padding-left: 20px">互动通知</span>
                    </el-menu-item>
                </el-menu>
            </div>
            <!--  菜单区域结束 -->

            <!--  数据渲染区域开始 -->
            <div style="background-color: #fffefb; width: 970px; position: absolute; right: 20px; height: 135vh">
                <RouterView/><!--组件渲染-->
            </div>
            <!--  数据渲染区域结束 -->
        </div>
        <!-- 下方区域结束 -->
    </div>
</template>

<script setup>

import router from "../../../router/index.js";
import {ArrowLeft} from "@element-plus/icons-vue";
import UserNav from "@/components/UserNav.vue";


</script>

<style scoped>
/*整体内容区域样式*/
.bottomArea {
    display: flex;
    background-color: #fffefb;
    width: 1260px;
    margin: 0 auto;
    position: relative;
    top: 80px;
}
/*<el-menu-item> 菜单项组件样式*/
.el-menu-item {
    height: 50px;
    border-radius: 7px;
    background-color: #fffefb;
    font-size: 14px;
    margin-left: 10px;
    margin-right: 20px;
}
.el-menu-item:hover {
    color: #1677ff;
    background-color: #f5f4f1;
}

.el-menu {
    border: 0;
    height: 80vh;
}
</style>